<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link rel="stylesheet" type="text/css" href="../../static/img/regist.css"/>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="reg_user">
<div id="header">
    <h2>人际关系追踪系统</h2>
<div id="app" style="margin-top:35px">
    <i-form ref="formCustom" :model="formCustom" :rules="ruleCustom" style="width: 250px">
        <form-item prop="sno">学号
            <i-input type="text" v-model="formCustom.sno" number placeholder="Number" size="large">
                <icon type="ios-person-outline" slot="prepend"></icon>
            </i-input>
        </form-item>
        <form-item prop="passwd">密码
            <i-input type="password" v-model="formCustom.passwd" placeholder="Password" size="large">
                <icon type="ios-lock-outline" slot="prepend"></icon>
            </i-input>
        </form-item>
        <form-item prop="passwdCheck">确认
            <i-input type="password" v-model="formCustom.passwdCheck" placeholder="Password" size="large">
                <icon type="ios-lock-outline" slot="prepend"></icon>
            </i-input>
        </form-item>
        <form-item>
            <i-button type="primary" @click="handleReset('formCustom')" style="margin-left: 30px">Reset</i-button>
            <i-button type="primary" @click="f()" style="margin-left: 50px">Submit</i-button>
        </form-item>
    </i-form>
</div>
</div>
</div>
<script>
    var Main = new Vue({
        el:'#app',
        data () {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Please enter your password'));
                } else {
                    if (this.formCustom.passwdCheck !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.formCustom.validateField('passwdCheck');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Please enter your password again'));
                } else if (value !== this.formCustom.passwd) {
                    callback(new Error('The two input passwords do not match!'));
                } else {
                    callback();
                }
            };
            const validateSno = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('Sno cannot be empty'));
                }else{
                    setTimeout(() => {
                        if (!Number.isInteger(value)) {
                            callback(new Error('Please enter a numeric value'));
                        }
                        callback();
                    });
                }
            };
            return {
                formCustom: {
                    sno:'',
                    passwd: '',
                    passwdCheck: '',
                },
                ruleCustom: {
                    sno: [
                        { validator: validateSno, trigger: 'blur' }
                    ],
                    passwd: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwdCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            f() {
                let Sno = this.formCustom.sno;
                if(Sno!=null){
                    $.ajax({
                        url:'isused',
                        type:'post',
                        data:{
                            "Sno":Sno
                        },
                        success(res){
                            if(res==="ok"){
                                alert("此账号可以使用");
                                console.log("ok");
                                Main.subm();
                            }else{
                                alert("此账号已注册过")
                            }
                        }
                    });
                }
            },
            subm(){
                pp1=this.formCustom.passwd;
                pp2=this.formCustom.passwdCheck;
                if(pp1===pp2)
                $.ajax({
                    url:'/addUser',
                    type: 'post',
                    data:{
                        "Sno":this.formCustom.sno,
                        "Spwd":pp1
                    },
                    success(res) {
                        window.location.href="/stu/MoreInfo";
                    }
                });
            }
        }
    });
    // var Component = Vue.extend(Main);
    // new Component().$mount('#app');

</script>
</body>
</html>